<template>
  <div class="bar">
    <div class="right">
      <t-button theme="default" variant="outline" @click="store.init()">
        <template #icon><t-icon name="refresh" /></template>
        {{ $t('common.reset') }}
      </t-button>
    </div>
    <div class="title">
      <t-button theme="default" shape="square" style="margin-right: 10px" @click="$router.back()">
        <template #icon><t-icon name="arrow-left" /></template>
      </t-button>
      {{ store.getData().id ? $t('common.update') : $t('common.create') }}{{ type ? plugin.t('create.' + type) : '' }}
    </div>
  </div>
  <Footer />
  <t-loading style="min-height: 500px" :loading="!ok" :showOverlay="false">
    <div class="plugin-order-create animate__fadeIn animate__animated animate__faster" v-if="ok">
      <t-row :gutter="20">
        <t-col :span="4">
          <Client />
        </t-col>
        <t-col :span="4">
          <CodeKey />
        </t-col>
        <t-col :span="4">
          <Form />
        </t-col>
      </t-row>

      <div class="bg-box no-border">
        <div class="title">{{ plugin.t('create.goods') }}</div>
        <Table @search="onSearch" @tax="onTax" />
        <div class="goods-btn">
          <Remarks />
          <Discount />
          <t-button theme="success" variant="outline" @click="onAppendSearch">
            <template #icon><t-icon name="component-breadcrumb" /></template>
            {{ plugin.t('create.append_goods') }}
          </t-button>
          <t-button theme="primary" variant="outline" @click="onSearch(-1)">
            <template #icon><t-icon name="search" /></template>
            {{ plugin.t('create.add_goods') }}
          </t-button>
          <t-button theme="primary" @click="store.add()">
            <template #icon><t-icon name="add" /></template>
            {{ plugin.t('create.add') }}
          </t-button>
        </div>
      </div>
      
      <Tax ref="tax" @post="tax => store.tax(tax)" />
      <Search ref="search" :price="true" :two="true" :discount="true" @post="onSearchPost" />
      <Search ref="searchAppend" :append="1" :price="true" :two="true" :discount="true" @post="onSearchPost" />
    </div>
  </t-loading>
</template>
<script setup>
  import { ref, nextTick } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import { get } from '@/api/erp/client'
  import store from './store'
  import configStore from '@/plugin/config/store'
  import Table from './table.vue'
  import Form from './form.vue'
  import Client from './client.vue'
  import CodeKey from './codeKey.vue'
  import Discount from './discount.vue'
  import Remarks from './remarks.vue'
  import Footer from './footer.vue'
  import Search from '@/plugin/goods/components/search.vue'
  import Tax from '@/plugin/config/components/tax.vue'
  
  const plugin = index.plugin
  const search = ref()
  const searchAppend = ref()
  const searchAutoClose = ref(false)
  const tax = ref()
  const ok = store.ok
  const type = store.type

  // 搜索商品
  const onSearch = i => {
    store.index(i)
    search.value.open()
    searchAutoClose.value = i > -1
  }

  // 附加项目
  const onAppendSearch = () => {
    searchAppend.value.open()
    searchAutoClose.value = false
  }

  // 确认搜索商品
  const onSearchPost = goods => {
    if(searchAutoClose.value) {
      store.put(goods)
      search.value.close()
    } else {
      store.add(goods)
      nextTick(() => {
        document.documentElement.scrollTop = document.documentElement.scrollHeight
      })
    } 
  }

  // 选择税率
  const onTax = i => {
    store.index(i)
    tax.value.open()
  }
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-order-create{
    overflow: hidden;
    
    .title{
      color: $color-title;
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
    }

    .info{
      margin-top: 20px;
      color: $color-content;
      span{
        height: 25px;
        line-height: 25px;
        display: block;
      }

      .min{
        font-size: 12px
      }
    }

    .goods-btn{
      padding-top: 20px;
      text-align: right;
      
      button{
        margin-left: 20px
      }
    }
  }
</style>